<template>
	<view>
		<navtop title="充值记录"></navtop>
		<view v-if="!load" class="list">
		    <view class="li" v-for="(item,index) in list" :key="index">
		        <view class="name">{{item.text}}</view>
		        <view class="itme">{{item.addtime}}</view>
		        <view class="jinbi">{{item.rmb}}元</view>
		    </view>
			<loading :type="1" :load="pageload" :nums="list.length"></loading>
			<view class="safearea-bottom"></view>
			<view class="safearea-bottom-fixed"></view>
		</view>
		<loading :load="true" v-else></loading>
	</view>
</template>

<script>
    let that = null,timer = null;
    export default {
        data() {
            return {
				load: true,
				page: 1,
				pageload: true,
                list:[]
            }
        },
        onLoad(e) {
            that = this;
			that.get_data();
        },
		onPullDownRefresh() {
			that.page = 1;
			that.get_data();
		},
		onReachBottom() {
		    //阻止重复加载
		    if(timer !== null) clearTimeout(timer);
			if(that.pageload){
				timer = setTimeout(function(){
					that.page++;
					that.get_data();
				},500);
			}
		},
        methods: {
			get_data(){
				that.http.get_curl('user/paylist',{page:that.page,size:20},function(res){
					uni.stopPullDownRefresh(); //停止下拉样式
					that.load = false;
					if(res.code == 1){
						if(that.page == 1){
							that.list = res.data.list;
						}else{
							that.list = that.list.concat(res.data.list);
						}
						that.pageload = res.data.pageload;
					}
				});
			}
        }
    }
</script>

<style lang="scss" scoped>
    .list{width: 100%;margin-top: 10PX;
        .li{padding: 10px 16px;background: #fff;border-top: 1px solid #f8f8f8;position: relative;
            .name{font-size: 14px;color: #333;font-weight: bold;
                span{font-size: 12px;color: #777;padding-left: 5px;}
            }
            .itme{font-size: 12px;color: #666;}
            .jinbi{font-size: 14px;color: #f60;position: absolute;right: 16px;top: 50%;transform: translateY(-50%);}
        }
        .li:nth-child(1){border-top: 0 solid #f8f8f8;}
    }
</style>